<template>
    <div class="toast" v-show="isShow">
        <div>{{msg}}</div>
    </div>
</template>

<script>
export default {
    name: 'Toast',//弹窗
    props: {
        // msg: {
        //     type: String,
        //     default: ''
        // },
        // isShow: {
        //     type: Boolean,
        //     default: false
        // }
    },
    data() {
        return {
            msg: '',//显示信息
            isShow: false//是否弹出
        }
    },
    methods: {
        // 弹窗点击弹出，msg=弹出内容 duration=弹出时长
        show(msg,duration) {
            this.msg = msg;
            this.isShow = true;

            setTimeout(() => {
                this.msg = '';
                this.isShow = false
            },duration)
        }
    }
}
</script>

<style scoped>
    .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 8px 10px;

        color: #fff;
        background-color: rgba(0,0,0,.8);

        z-index: 9;
    }
</style>